iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
Modern Web

TailwindCSS - 從零開始系列 第 1

TailwindCSS 從零開始 - 寫在前面

  • 分享至 

  • xImage
  •  

tailwindcss

此系列文章已改編成書,歡迎購買:https://www.tenlong.com.tw/products/9786267146460?list_name=i-r-zh_tw

初次見面

雖然 TaiwindCSS 於 2019 年發表,當時我正開始學習前端技術,對於此領域還有很多未知的地方,對於蓬勃發展且不斷進化的前端領域,一開始我也只是從最基本的 HTML + CSS 跨入,進而學習 SCSS 發現預處理器的優點以及模組化的概念,也在這時 RWD 的概念與熟練度才建立起來,接觸 Bootstrap 後,感到更便利了!當時就已經覺得切版似乎就是這樣了。

後來在專案上碰到 TailwindCSS 的時候,整個眼界被打開,竟然有比 Bootstrap 這個老字號更方便的框架,並且不用撰寫任何一行 CSS 外,還可以自由改動的樣式,所以開始投入此框架的學習。

值得振奮的是,台灣有團隊在做中文翻譯的官方文件,

本系列內容

維持著過去鐵人賽的初衷,一切從零開始的學習,從 TailwindCSS 最基本的概念認識,到基楚實作,dark 模式與 JIT 模式介紹,最後會帶到一個頁面的架構練習以及目前是使用 Angular 開發,所以也會介紹如何引入於 Angular 來使用 TailwindCSS。

從零開始的本懷

因為我是從完全不會寫網頁到現在轉職也將近一年的前端工程師,了解跨領域要挑戰網頁的困難點與痛點,畢竟轉職後身邊許多都是資工系本科的人在身邊,這時候都是很大神級的人物,而我自己又是中年轉職,壓力頗大,許多都是從零開始學習,所以這篇開始,希望可以讓只有聽過 TailwindCSS,或是完全沒碰過的新手作為一個參考,因篇幅關係,無法把全部的功能逐一介紹與使用,可能文中會有不足或是需要修改的地方,還請各位前輩不吝指教,我會盡快更新內容,以免誤人子弟,先感謝大家的閱讀,希望大家都可以一起來用 TailwindCSS 來開發網頁享受箇中樂趣!

參考資料

除了自己閱讀官方文件之外,也另外有參考六角學院校長去年鐵人賽的 CSS 的優良部分介紹到 TailwindCSS 而產生興趣,也有從 HISKIO 平台的 布魯斯的 Tailwind CSS 開發秘技|輕鬆打造仿 Facebook UI 中的學習知識點。

結語

感謝您看完本篇前言,如果您還有興趣,就跟著此系列文章開始學習 TailwindCSS 吧!


下一篇
TailwindCSS 從零開始 - 選擇該框架的原因
系列文
TailwindCSS - 從零開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言